<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电影信息查询</title>

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./lib/layui/css/layui.css"/>
    <!--引入页面css-->
    <link rel="stylesheet" href="./css/Common.css">
    <link rel="stylesheet" href="./css/BookTicketPage.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css" media="all">

    <!-- 引入 layui.js -->
    <script src="./lib/layui/layui.js"></script>
    <!--引入jquery.js-->
    <script src="./lib/jquery-tool/jquery-3.4.1.min.js"></script>
    <!--引入axios-->
    <script src="./lib/axios-tool/axios.min.js"></script>

</head>
<body>
<div class="cinema-header-container"></div>
<div class="book-ticket-all-container">
    <div class="layui-row">
        <div class="layui-col-md4">

            <div class="layui-row grid-demo">
                <div class="layui-col-md3 my01">电影名字:</div>
                <div id="filmName" class="layui-col-md5 my03 "></div>
                <br>
                <br>
            </div>

            <div class="layui-row grid-demo">
                <div class="my01 layui-col-md3">电影类型:</div>
                <div id="filmType" class="layui-col-md9 my03"></div>
            </div>
            <br>
            <br>
            <div class="layui-row grid-demo">
                <div class="my01 layui-col-md3">导演:</div>
                <div id="derector_name" class="layui-col-md9 my03"></div>
            </div>
            <br>
            <br>
            <div class="layui-row grid-demo">
                <div class="my01 layui-col-md3">上映时间:</div>
                <div id="playStartTime" class="layui-col-md9 my03"></div>
            </div>
            <br>
            <br>
            <div class="layui-row grid-demo">
                <div class="my01 layui-col-md3">下架时间:</div>
                <div id="playEndTime" class="layui-col-md9 my03"></div>
            </div>
            <br>
            <br>
            <div class="layui-row grid-demo">
                <div class="my01 layui-col-md3">放映大厅:</div>
                <div id="playHall" class="layui-col-md9 my03"></div>
            </div>
            <br>
            <br>
            <div class="layui-row grid-demo">
                <div class="my01">电影描述:</div>
                <br>
                <p id="filmDescription" class="my02 layui-col-md9"></p>
            </div>
        </div>

        <div class="layui-col-md6">
            <div class="layui-carousel" id="test1" lay-filter="test1">
                <div carousel-item="" id="getImgInfo">

                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <br>
            <br>
            <div class="my01">播放时间段:</div>
            <div id="playTime">
            </div>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">限定可选日期</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test-limit1" placeholder="yyyy-MM-dd">
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="layui-row" id="detailInfo">
        <div id="hallSeats" style="width:900px;margin: 0 auto;">
        <span id='screen'>
             <p>
                座位预定
            </p>
        </span>
            <div id="seats">


            </div>

            <div id="booking_desc">
                <div class="booking_left">
                    <p style="font-weight: bold; font-size: larger;">您选中的座位 </p>
                    <div id="selected_seat"></div>
                    <br>
                    <p style="color: #FBBC53;font-weight: bold; font-size: larger;">您选中的时间</p>
                    <div id="selected_time"></div>


                    <br>
                    <button id="bookNowButton" type="button" onclick="purchase()">现在预定</button>
                    <div id="errMsg"></div>
                </div>


                <div class="booking_right" id="ticketPrice">
                </div>
                <div>总价：<span id="total"> 0 </span></div>

            </div>
        </div>
    </div>
</div>


<script src="lib/layui/layui.js" charset="utf-8"></script>
<script src="./js/Common.js"></script>
<script>
    //获取跳转时参数值函数
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        console.log(url);
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            console.log(str);
            if (str.indexOf("&") != -1) {
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            } else {
                theRequest[str.split("=")[0]] = decodeURIComponent(str.split("=")[1]);
                console.log(theRequest);
            }
        }
        return theRequest;
    }//对跳转时带有电影id进行处理，
    //带有filmId的跳转，则直接跳转到目标电影界面不可更换
    //不带filmId则默认显示所有电影

    $(document).ready(function () {
        var a = GetRequest();
        var index_1 = a['filmId'];
        if ($(".layui-btn-radius").length >= 0 && ($("#test-limit1").val() != null && $("#test-limit1").val() != "")) {
            $('#bookNowButton').fadeIn(1000);
        } else {
            $('#bookNowButton').fadeOut(1000);
        }
        if (index_1 != null) {
            var txt1 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + index_1 + ".jpg'></div>";

            $("#getImgInfo").append(txt1);
            $("#playTime").empty();
            var filmALl = $("#getImgInfo").children();
            console.log(filmALl.val());
            var filmIdNow = index_1;
            window.filmId = filmIdNow;
            $.getJSON("http://localhost:9093/film-info/getOneFilmInfo?filmId=" + filmIdNow, function (result) {
                console.log(result);
                $.each(result, function (i, field) {
                    $("#filmStory").text(field.description + " ");
                    $("#filmName").text(field.name + " ");
                    $("#filmType").text(field.filmTypes + " ");
                    $("#derector_name").text(field.directorName + " ");
                    $("#playStartTime").text(field.startTime + " ");
                    $("#filmDescription").text(field.description)
                    $("#playEndTime").text(field.endTime + " ");
                });
            });
            addNumber();
            $.ajax({
                type: "GET",
                url: "http://localhost:9091/film-info/getHallsInfo",
                dataType: "jsonp",
                data: {},
                jsonpCallback: "successCallBack",
                success: function (data) { //【成功回调】
                    $.each(data, function (i, field) {
                        var hall = field.filmIds;
                        console.log(hall);
                        if (hall.indexOf(filmIdNow) != -1) {
                            window.hallId = field.hallId;
                            $("#selected_seat").empty();
                            $("#total").text(0);
                            updateSeats(field.seatNum);
                            window.pricePerTicked = field.ticketPrice;
                            $("#ticketPrice").text("每个座位的单价:" + window.pricePerTicked + "元");
                            $("#playHall").text(field.name);
                            var dataArray = field.filmTimePeriods.split(",");
                            var n = dataArray.length;
                            var m = dataArray[n - 1].length;
                            dataArray[0] = dataArray[0].substr(1);
                            dataArray[n - 1] = dataArray[n - 1].substr(0, m - 1);
                            playTimeShow(dataArray, n);

                        }
                    });
                },
                error: function (xhr, type) { //【失败回调】
                    console.log(xhr);
                    console.log("fuck");
                }
            })

            //else默认初始化

        } else {
            var txtt1 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + "film_1" + ".jpg'></div>";
            var txtt2 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + "film_2" + ".jpg'></div>";
            var txtt3 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + "film_3" + ".jpg'></div>";
            var txtt4 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + "film_4" + ".jpg'></div>";
            var txtt5 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + "film_5" + ".jpg'></div>";
            var txtt6 = "<div value='" + index_1 + "'><img src='http://localhost:9999/" + "film_6" + ".jpg'></div>";
            var txt2 = txtt1 + txtt2 + txtt3 + txtt4 + txtt5 + txtt6;

            // var txt2 = "                    <div value=\"film_1\"><img src=\"static/image/img.png\"></div>\n" +
            //     "                    <div value=\"film_2\"><img src=\"static/image/img_1.png\"></div>\n" +
            //     "                    <div value=\"film_3\"><img src=\"static/image/img_2.png\"></div>";
            $("#getImgInfo").append(txt2);
            //默认初始化
            $.getJSON("http://localhost:9093/film-info/getOneFilmInfo?filmId=film_1", function (result) {
                console.log(result);
                updateSeats(50);
                window.pricePerTicked = 49;//单价
                window.filmId = "film_1";
                window.hallId = "hall_1";
                addNumber();
                $.each(result, function (i, field) {
                    $("#filmDescription").text(field.description + " ");
                    $("#filmName").text(field.name + " ");
                    $("#filmType").text(field.filmTypes + " ");
                    $("#derector_name").text(field.directorName + " ");
                    $("#playStartTime").text(field.startTime + " ");
                    $("#playEndTime").text(field.endTime + " ");
                    $("#ticketPrice").text("每个座位的单价:" + window.pricePerTicked + "元");
                    $("#playHall").text("放映厅1");
                });
                var tempData = ["09:00", "12:00", "15:00", "19:00"]
                for (var i = 0; i < 4; i++) {
                    var tx1 = "<div class=\"layui-row grid-demo\">"
                    var txt2 = tx1 + "<div class=\"layui-btn layui-btn-normal\" >" + tempData[i] + "</div>" + "</div>";
                    $("#playTime").append(txt2);
                }
                timeClickEvent();

            });

        }


    });
</script>
<script>
    //座位号添加函数
    window.pricePerTicked = 0;

    function addNumber() {
        $(document).ready(function () {
            $('.seat').each(function () {
                var column_num = parseInt($(this).index()) + 1;
                var row_num = parseInt($(this).parent().index()) + 1;
                seat_num = row_num + "-" + column_num;
                $(this).text(seat_num); // 座位号
                $(this).addClass("seat" + seat_num);  // 个座位加css
            });
        });
    }

    //时间点击事件
    function timeClickEvent() {
        $(document).ready(function () {
            var maximumSeats = 1;//预定座位数目的最大限制
            $("#playTime .layui-btn").click(function () {

                $('#errMsg').html('');
                console.log($(this))
                console.log(!$(this).hasClass('select'))
                if ($(this).hasClass('layui-btn-warm')) { // 检查是否被选中
                    $(this).removeClass('layui-btn-warm'); //如果选中了，移除选中的css
                    $(this).css('background-color', '#1E9FFF'); // 重新加个背景
                    $(this).removeAttr("id");
                    $("#selected_time").text("");
                    //var currentSeatClass = $(this).attr('class').split(' ')[1];

                    //console.log(currentSeatClass);
                    //$("#selected_seat ." + currentSeatClass).remove();

                } else if ($(".layui-btn-warm").length < maximumSeats && !$(this).hasClass('layui-btn-warm')) { // 检查预定的座位数目是否超出限制
                    $(this).css('background-color', '#FFB800'); // 加背景颜色
                    $(this).addClass("layui-btn-warm"); // 添加选中css
                    $(this).attr("id", "chosenTime");
                    var chosenTime = $("#chosenTime").html();
                    $("#selected_time").text(chosenTime);
                }
            });
        });


    }

    //座位号点击事件
    function clickEvent() {
        $(document).ready(function () {
            var seat_num;
            var total_bill = 0;
            var maximumSeats = 5;//预定座位数目的最大限制
            $("#seats .seat").click(function () {

                $('#errMsg').html('');
                console.log($(this))
                console.log(!$(this).hasClass('select'))
                if ($(this).hasClass('layui-btn-radius')) { // 检查是否被选中
                    $(this).removeClass('layui-btn-radius'); //如果选中了，移除选中的css
                    $(this).css('background-color', '#1E9FFF'); // 重新加个背景

                    var currentSeatClass = $(this).attr('class').split(' ')[1];

                    console.log(currentSeatClass);
                    $("#selected_seat ." + currentSeatClass).remove();

                } else if ($("#seats .layui-btn-radius").length < maximumSeats && !$(this).hasClass('layui-btn-radius')) { // 检查预定的座位数目是否超出限制
                    $(this).css('background-color', '#FF5722'); // 加背景颜色
                    $(this).addClass("layui-btn-radius"); // 添加选中css

                    var column_num = parseInt($(this).index()) + 1;
                    var row_num = parseInt($(this).parent().index()) + 1;

                    $("#selected_seat").append("<span class='your_selected_seat seat" + row_num + "-" + column_num + " '> 座位号: <b style='color:#EAABFF'>" + row_num + "-" + column_num + "</b> </br></span>");
                } else {
                    $('#errMsg').html('您选中的座位已经超过限制.');
                }

                if ($(".layui-btn-radius").length >= 0 && ($("#test-limit1").val() != null && $("#test-limit1").val() != "")) {
                    $('#bookNowButton').fadeIn(1000);
                } else {
                    $('#bookNowButton').fadeOut(1000);
                }
                //计算总价
                window.ticketNum = $(".layui-btn-radius").length;
                total_bill = $(".layui-btn-radius").length * window.pricePerTicked;
                console.log(total_bill);
                $("#total").text(total_bill);
            });
        });

    }


</script>

<script>


    //购买点击事件
    function purchase() {
        axios({
            method: 'get',
            url: 'http://localhost:9090/user/getUserFromSession',
        }).then(res => {
            console.log(res);
            if (res.data.status === 0) {
                window.userId = res.data.data.userId;
                console.log(userId);
            }
        });
        var curTime = new Date();
        var year = curTime.getFullYear();
        var month = curTime.getMonth() + 1;
        var day = curTime.getDate();
        var cutTimeStr = year + "-" + month + "-" + day;
        console.log(cutTimeStr);
        console.log(year);
        console.log(month);
        console.log(day);
        var timePeriod = $("#chosenTime").html();
        console.log("$(\"#chosenTime\").html()", timePeriod);
        var timePeriod = timePeriod.replaceAll('\"', '');
        console.log("replace之后", timePeriod);
        var purchaseDate = $("#test-limit1").val();
        // alert(purchaseDate);

        axios({
            method: "POST",
            url: "http://localhost:9093/order/createOrder",
            dataType: "json",
            data: {
                "filmDate": purchaseDate,
                "filmId": window.filmId + "",
                "hallId": window.hallId + "",
                "ticketsNum": window.ticketNum,
                "timePeriod": timePeriod,
                "userId": window.userId + ""
            }

        }).catch(function () {
            alert("购票成功");
        })
            .then(function (response) {
                console.log(response);
                alert("购票成功");

            });
        // $(document).ready(function () {
        //
        // });
    }

</script>
<script>
    $(document).ready(function () {
        axios.defaults.withCredentials = true;    //发送请求携带session信息
        axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
        //检查登录信息
        checkLogin();
        //设置顶部导航栏
        initNavHeader('book-ticket-item');

        layui.use('element', function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        });
    })
</script>
<script>
    layui.use('carousel', function (obj) {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            , autoplay: false
            , width: '400px'
            , height: '533px'
            //,anim: 'updown' //切换动画方式
        });
        //默认显示所有电影页面时，轮播图及其显示信息变换代码
        carousel.on('change(test1)', function (obj) {
            $(document).ready(function () {
                $("#playTime").empty();
                var filmALl = $("#getImgInfo").children();
                console.log(filmALl.val());
                var filmIndex = obj.index + 1;
                var filmIdNow = "film_" + filmIndex;
                window.filmId = filmIdNow;
                $.getJSON("http://localhost:9093/film-info/getOneFilmInfo?filmId=" + filmIdNow, function (result) {
                    console.log(result);
                    $.each(result, function (i, field) {
                        $("#filmStory").text(field.description + " ");
                        $("#filmName").text(field.name + " ");
                        $("#filmType").text(field.filmTypes + " ");
                        $("#derector_name").text(field.directorName + " ");
                        $("#playStartTime").text(field.startTime + " ");
                        $("#filmDescription").text(field.description)
                        $("#playEndTime").text(field.endTime + " ");
                        layui.use('laydate', function () {
                            var laydate = layui.laydate;

                            //执行一个laydate实例
                            laydate.render({
                                elem: '#test-limit1' //指定元素,
                                , min: field.startTime + ""
                                , max: field.endTime + ""

                            });
                        });
                    });
                });
                addNumber();
                $.ajax({
                    type: "GET",
                    url: "http://localhost:9091/film-info/getHallsInfo",
                    dataType: "jsonp",
                    data: {},
                    jsonpCallback: "successCallBack",
                    success: function (data) { //【成功回调】
                        $.each(data, function (i, field) {
                            var hall = field.filmIds;
                            console.log(hall);
                            if (hall.indexOf(filmIdNow) != -1) {
                                window.hallId = field.hallId;
                                $("#selected_seat").empty();
                                $("#total").text(0);
                                updateSeats(field.seatNum);
                                window.pricePerTicked = field.ticketPrice;
                                $("#ticketPrice").text("每个座位的单价:" + window.pricePerTicked + "元");
                                $("#playHall").text(field.name);
                                var dataArray = field.filmTimePeriods.split(",");
                                var n = dataArray.length;
                                var m = dataArray[n - 1].length;
                                dataArray[0] = dataArray[0].substr(1);
                                dataArray[n - 1] = dataArray[n - 1].substr(0, m - 1);
                                playTimeShow(dataArray, n);

                            }
                        });
                    },
                    error: function (xhr, type) { //【失败回调】
                        console.log(xhr);
                        console.log("fuck");
                    }
                })
            });
        });
    });

    //动态切换播放时间函数
    function playTimeShow(timeArray, n) {
        $.each(timeArray, function (i, field) {
            var tx1 = "<div class=\"layui-row grid-demo\">"
            var txt2 = tx1 + "<div class=\"layui-btn layui-btn-normal\" >" + field + "</div>" + "</div>";
            $("#playTime").append(txt2);
        })
        timeClickEvent();
    }

    //动态切换电影座位函数
    function updateSeats(seatsNum) {
        $(document).ready(function () {
            $("#seats").empty();
            var txt2 = "<div class=seat ></div>"
            if (seatsNum == 50) {
                for (var i = 0; i < 2; i++) {
                    var txt1 = "<div class=seatsRaw  id=seat" + i + "></div>";
                    $("#seats").append(txt1);
                    for (var j = 0; j < 15; j++) {
                        var cur = "#seat" + i;
                        $(cur).append(txt2);
                    }
                }
                i++;
                var txt1 = "<div class=seatsRaw id=seat" + i + "></div>";
                $("#seats").append(txt1);
                for (var j = 0; j < 20; j++) {
                    $("#seat" + i).append(txt2);
                }
            } else if (seatsNum == 70) {
                for (var i = 0; i < 5; i++) {
                    var txt1 = "<div class=seatsRaw id=seat" + i + "></div>";
                    $("#seats").append(txt1);
                    for (var j = 0; j < 14; j++) {
                        $("#seat" + i).append(txt2);
                    }
                }
            } else {
                for (var i = 0; i < 7; i++) {
                    var txt1 = "<div class=seatsRaw id=seat" + i + "></div>";
                    $("#seats").append(txt1);
                    for (var j = 0; j < 20; j++) {
                        $("#seat" + i).append(txt2);
                    }
                }
            }
        })
        addNumber();
        clickEvent();
    }

</script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test-limit1' //指定元素,
            , min: '2016-10-14'
            , max: '2080-10-14'
            , done: function (value, date) {
                if ($(".layui-btn-radius").length >= 0) {
                    $('#bookNowButton').fadeIn(1000);
                } else {
                    $('#bookNowButton').fadeOut(1000);
                }
            }
        });
    });
</script>


</body>
</html>